<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"                
                xmlns:cs="http://myfaces.apress.com/custom"
				template="/WEB-INF/layouts/standard.xhtml"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:bf="http://www.bssmanager.com/jsf"
				xmlns:c="http://java.sun.com/jstl/core">
				
				
	<ui:define name="formheader">
		<h2>Places</h2>
		<style>
			td {
				vertical-align: top;
			}
		</style>
	</ui:define>
	
	<ui:define name="formGlobal">
		<bf:dateSelector controller="#{placeController}"  date="date" ajaxUpdate="false"/>
	</ui:define>

	<ui:define name="content">

		<h:messages errorClass="errors" style="color:#ff1111" />
			
			<h:form id="formPlaces" prependId="false">
			
			
				<h:panelGrid columns="3">
					
					<rich:panel style="border:0">
						<f:facet name="header">
							<h:outputText value="Countries"/>
						</f:facet>
						<h:panelGrid columns="3">
							<h:outputLabel value="Name:" />
							<h:inputText id="inpCountry" value="#{placeController.country.name}" />		
							<a4j:commandButton onclick="showLoading();" oncomplete="hideLoading();if(#{placeController.error}){alert('#{placeController.errors[0]}');}" limitToList="true"  action="#{placeController.addCountry}" value=" + " reRender="olCountries,inpCountry"  />				
						</h:panelGrid>
														
						<rich:orderingList id="olCountries"  value="#{placeController.countries}" controlsType="none" converter="#{countryConverter}" var="country"
							selection="#{placeController.selectedCountry}"  >
							 <rich:column> 
				                <f:facet name="header">
				                    <h:outputText value="Countries" />
				                </f:facet>
				                <h:outputText value="#{country.name}"/>
				            </rich:column>			
				            <a4j:support event="onclick" onsubmit="showLoading();" oncomplete="hideLoading();" limitToList="true" action="#{placeController.selectCountry}" reRender="frmStates,frmPlaces,olStates,olPlaces"/>	
						</rich:orderingList>
						
					</rich:panel>
					
					<rich:panel style="border:0" id="pnlStates">
						<f:facet name="header">
							<h:outputText value="States"/>
						</f:facet>
						<h:panelGrid id="frmStates" columns="3" style="display: #{not empty placeController.selectedCountry ? 'block':'none'}">
							<h:outputLabel value="Name:" />
							<h:inputText id="inpState" value="#{placeController.state.name}" />		
							<a4j:commandButton action="#{placeController.addState}" value=" + " reRender="olStates,inpState" onclick="showLoading();" oncomplete="hideLoading();if(#{placeController.error}){alert('#{placeController.errors[0]}');}" limitToList="true"  />				
						</h:panelGrid>
														
						<rich:orderingList id="olStates"  value="#{placeController.states}" controlsType="none" converter="#{stateConverter}" var="state" selection="#{placeController.selectedState}" >
							 <rich:column> 
				                <f:facet name="header">
				                    <h:outputText value="States" />
				                </f:facet>
				                <h:outputText value="#{state.name}"/>
				            </rich:column>		
				            <a4j:support event="onclick" onsubmit="showLoading();" oncomplete="hideLoading();" limitToList="true" action="#{placeController.selectState}" reRender="olPlaces,frmPlaces"/>		
						</rich:orderingList>
						
					</rich:panel>
					
					<rich:panel style="border:0">
						<f:facet name="header">
							<h:outputText value="Places"/>
						</f:facet>
						<h:panelGrid id="frmPlaces" columns="3" style="display: #{not empty placeController.selectedState ? 'block':'none'}">
							<h:outputLabel value="Name:" />
							<h:inputText id="inpPlace" value="#{placeController.place.name}" />		
							<a4j:commandButton action="#{placeController.addPlace}" value=" + " reRender="olPlaces,inpPlace"  onclick="showLoading();" oncomplete="hideLoading();if(#{placeController.error}){alert('#{placeController.errors[0]}');}" limitToList="true" />				
						</h:panelGrid>
														
						<rich:orderingList id="olPlaces"  value="#{placeController.places}" controlsType="none" converter="#{placeConverter}" var="place" >
							 <rich:column> 
				                <f:facet name="header">
				                    <h:outputText value="Places" />
				                </f:facet>
				                <h:outputText value="#{place.name}"/>
				            </rich:column>				
						</rich:orderingList>
						
					</rich:panel>
				
				</h:panelGrid>							
				
			</h:form>

	</ui:define>
</ui:composition>